<template>
  <div>
    <el-dialog title="工单详情" :visible="detaill" :before-close="close"> 
     <div v-if='row.taskStatusTypeEntity'>
       <el-alert
    :title="row.taskStatusTypeEntity.statusName"
    type="info"
    show-icon>
  </el-alert>
     </div>
      <div class="info" ref='form'>
          <div class="left">
        <div class='l'>设备编号: {{row.innerCode}}</div>
        <div class='l'>取消日期: </div>
        <div class='l' v-if='row.taskType'>工单类型: {{row.taskType.typeName}}</div>
        <div class='l'>工单方式: {{row.method}}</div>
      </div>
      <div class="right">
        <div class='r'>创建日期： {{row.createTime}}</div>
        <div class='r'>运营人员： {{row.userName}}</div>
        <div class='r'>补货数量：<el-link >补货详情</el-link></div>
        <div class='r'>取消原因： </div>
      </div>
      </div>
      <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click='edit(row)'>重新创建</el-button>
      </div>
   </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HrsaasDetail',
  props:{
    detaill:{
      type:Boolean,
      default:true
    },
    row:{
     type:Object,
      default:()=>({})
    }
  },
  data() {
    return {
    };
  },

  mounted() {
    
  },

  methods: {
    close(){
      this.$emit('update:detaill',false)
    },
    edit(row){
      this.$emit('edit',row)
    }
    },
};
</script>

<style lang="scss" scoped>
  .info{
    display: flex;
    margin-top: 30px;
    .left{
      margin-left: 30px;
      .l{
    padding-top: 15px;
      }
    }
    .right{
      margin-left: 280px;
      padding: 15px;
      .r{
    padding-top: 15px;
    .el-link{
      color:#4368e1
    }
      }
    }
  }
</style>